
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <ipt-com v-model="msg"></ipt-com>
        <!-- 子组件中动态绑定msg -->
    </div>
</body>

</html>
<!-- 组件模板 -->
<template id="bro1">
    <fieldset>
        <legend>输入组件</legend>
        <input type="text" @input="ipt" :value="v">
        <!-- 一个自定义事件ipt，一个自定义属性v -->
    </fieldset>
</template>

<script>
    //v-model就是一个语法糖
    //1.必须在子组件中,默认接收一个叫做value的props属性
    //2.必须通过$emit发射一个叫做input的自定义事件
    Vue.component("ipt-com", {
        props:['v'], //接受这个v
        data() {
            return {
                msg: "大碗牢饭"
            }
        },
        model:{//用于更改v-model的默认属性和默认事件
            prop:"v",  //表示将input中默认的value改为了v
            event:"i" //表示将默认的input输入事件，改为i
        },
        methods:{
            ipt(e){
                this.$emit("i",e.target.value)
                //表示发送i,并且传递一个从那后素，这参数就是vue实例中的msg
            }
        },
        template: "#bro1",
    })
    const vm = new Vue({
        el: "#app",
        data:{
            msg:"出来混迟早要还的"
        }
    })
</script>